<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MetaSota Online Editor </title>

</head>
<body>
<script type="text/javascript"  src="jquery.min.js"></script>
<div id="id" contenteditable="true">ni hao</div>

<script>
//    document.getElementById("editor").addEventListener("input", function() {
//        console.log("input event fired");
//    }, false);
var div= document.getElementById("id");
console.log(div);
div.addEventListener("keyup", function(){
    console.log("input event fired");

    var span= document.createElement("span");
    span.innerHTML="  ";
    div.appendChild(span);
    var span1= document.createElement("span");
    span1.innerHTML="   ";
    div.appendChild(span1);
});

//    $(function () {
////        $("div").
//
//        $("div").keyup(function () {
//            var value=$(this).html();
//            var values=value.split(" ");
//            console.log(values.length);
//            var parent=$(this);
//            for(var i=0;i<values.length ;i++){

//            }
//            $(this).html("");
//        });
//    });
</script>
</body>
</html>